<template>
    <div>
        分类页
        <!-- 使用动态组件component -->
        <!-- <ul>
            <li @click="comName = 'TabCom1'">组件1</li>
            <li @click="comName = 'TabCom2'">组件2</li>
            <li @click="comName = 'TabCom3'">组件1</li>
        </ul>
        <component :is="comName"></component> -->
    </div>
</template>

<script>
// 引入选项啦组件1,2,3
import axios from 'axios';

import TabCom1 from '../components/TabComOne.vue';
import TabCom2 from '../components/TabComTwo.vue';
import TabCom3 from '../components/TabComThree.vue'
export default {
    name: '',
    data() {
        return {
            comName: 'TabCom1'
        };
    },
    mounted() {
        console.log('分类', this);
    },
    // 局部组件的注册方式
    components: {
        // TabCom1: TabCom1,
        // TabCom2,
        // TabCom3
    },
    created() {
        // http://127.0.0.1:5173/
        axios.get('http://kumanxuan1.f3322.net:8001/index/index').then(res => {
            console.log(res);
        })
    }


}

</script>
<style scoped>
ul {
    display: flex;
    list-style: none;
}
</style>